<template>
    <el-card>
       <el-row >
        <el-col :span="12">
            <el-text>
                当前进度
            </el-text>
        </el-col>
        <el-col :span="12">
            <el-text>
                详情
            </el-text>
        </el-col>

       </el-row>
       <el-row style="margin-top: 10px;">
         <el-col :span="6">
            <n-progress
        class="item_progress"
        type="circle"
        :percentage="20"
        :color="themeVars.successColor"
        :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
        :indicator-text-color="themeVars.successColor"
    >
            <el-span  direction="vertical" fill>
                <p> <span style="text-align: center;font-size: small;">全部</span></p>
                <p> <span style="text-align: center;font-size: larger;">8</span></p>
                <div class="my-divilier"></div>
                <p> <span style="text-align: center;font-size: small;">3050</span></p>
            </el-span>
        </n-progress>
         </el-col>
         <el-col :offset="2" :span="15" style="padding-top: 10px;">
           <datStatistics/>
         </el-col>
       </el-row>
    </el-card>
  
</template>

<script lang="ts" setup>
import { defineComponent } from "vue";
import { changeColor } from "seemly";
import { useThemeVars } from "naive-ui";
import datStatistics from './dataStatistics.vue'

const themeVars=useThemeVars()

</script>

<style scoped>
p{
    padding: 0;
    margin: 0;
}
.my-divilier{
    background-color: rgb(88, 144, 144);
    width: 100%;
    height: 1px;
}

</style>